<template>
  <div>
    <el-row class="top_row">
      <el-col :span="24">
        <div class="top_title">
          <div class="left_add">
            <el-button
              type="danger"
              @click="$router.push('/Car/Edit')"
              size="mini"
              icon="el-icon-circle-plus"
            >新增</el-button>
          </div>
          <div class="right_sel">
            <el-input size="mini" v-model="SelName" placeholder="查找...">
              <el-button slot="append" @click="SelDt" icon="el-icon-search" style="width:50px;"></el-button>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table :data="ListDt" style="width: 100%">
      <el-table-column prop="pk_Car" label="ID" width="80"></el-table-column>
      <el-table-column prop="TypeName_CHS" label="类型" width="80"></el-table-column>
      <el-table-column prop="Title" label="标题"></el-table-column>
      <el-table-column prop="CarTitle" label="申请车辆"></el-table-column>
      <el-table-column label="申请时间" width="160">        
        <template slot-scope="scope">
          <span>{{scope.row.CreateDate|TimeFilter}}</span>
        </template>

      </el-table-column>

      <el-table-column prop="IsCheck" label="审核" width="60">
        <template slot-scope="ListDt">
          <el-checkbox :value="ListDt.row.IsCheck" disabled></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="CheckDate" label="审核时间" width="160"></el-table-column>
      <el-table-column prop="CheckFullName" label="审核人" width="100"></el-table-column>
      <el-table-column label="状态" width="80">
        <template slot-scope="ListDt">
          <el-tag effect="dark" size="small" :style="'border-color:'+ListDt.row.Visual" :color="ListDt.row.Visual">
            {{ListDt.row.StatusName_CHS}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="IsBack" label="是否归还" width="120">
        <template slot-scope="ListDt">
           <el-checkbox :value="ListDt.row.IsBack" disabled></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="BackDate" label="归还时间"></el-table-column>
      <el-table-column prop="state" label="操作" min-width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button @click="Edit(scope.row.pk_Car)" size="mini" type="primary" icon="el-icon-edit-outline">修改</el-button>
           <el-popconfirm @onConfirm="Delete(scope.$index,scope.row.pk_Car)" style="margin-left:10px;"
                  :title="'确定删除?'">
                  <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <div style="padding:10px 0;text-align:center">
        <div class="block">
          <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[100, 200, 300, 400]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="400">
          </el-pagination>-->
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.top_row {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 10px;
  .top_title {
    .left_add {
      float: left;
    }
    .right_sel {
      float: right;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      ListDt: [],
      SelName: "",
    };
  },
  mounted() {
    this.ReadData();
  },
  methods: {
    //查询
    ReadData(){
    this.$axios({
      url: "/HrApi/Car/GetList",
      method: "GET",
      params: {
        Title:this.SelName
      },
    }).then((res) => {
      if (!res.data.code) {
        this.ListDt = res.data.data;
        console.log(res.data)
      } else {
        this.$message.error(res.data.msg);
      }
    });
    },
    //修改
    Edit(id) {
      this.$router.push({
        path: "/Car/Edit",
        query: {
          id: id,
        }
      });
    },
    //删除车辆记录
    Delete(index,pk_Car){
      this.$axios({
        url: "/HrApi/Car/DelCarListData",
        method: "POST",
        params: {
          pk_Car:pk_Car,
        },
      }).then((res) => {
        if (!res.data.code) {
          this.$message.success(res.data.msg)
          this.ReadData();
        } else {
          this.$message.error(res.data.msg)
        }
      });
    },
    SelDt() {
      //模糊查询
      this.$axios({
        url: "/HrApi/Car/GetList",
        method: "GET",
        params: {
          Title:this.SelName,
        },
      }).then((res) => {
        if (!res.data.code) {
          this.RoleNameDt = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
  //过滤时间
  filters: {
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt
    }
  },
  watch: {
    //侦听模糊查询，如果为空自动显示所有数据
    SelName(n) {
      if (n === "") {
         this.ReadData();
      }
    },
  },
};
</script>